<template>
	<view class="container">
		<view class="header">
			<view class="left">
				<image src="https://img.fubaozx.cn/static/oldImg/16995012334844.png" mode=""></image>
				<view class="rate">
					<view class="rate1">
						{{$toFiexd(data.good_rate*100,0)}}%
					</view>
					<view class="rate2">
						好评率
					</view>
				</view>
			</view>
			<view class="right">
				<view class="right1">
					{{data.Commentstotal}}条评价
				</view>
<!-- 				<view class="right2">
					总销量 {{data.sales}}
				</view> -->
			</view>
		</view>
		<view class="lists">
			<view class="items" :class="{active:data.code==item.code}" v-for="(item,index) in data.list"  @click="settab(item.code)">
				{{item.name}}
			</view>
		</view>
		<view class="content">
			<view class="title">
				评价({{data.Commentstotal}})
			</view>
			<empty v-if="data.Comments.length==0"></empty>
			<view class="list">
				<view class="item" v-for="item in data.Comments" :key="item">
					<view class="info">
						<view class="head">
							<image :src="item.user.head?item.user.head:$defaultAvatar" mode=""></image>
						</view>
						<view class="infobox">
							<view class="infoboxs">
								<view class="name">
									{{item.user.nickname}}
								</view>
								<view class="star">
									<view class="xing">
										<view class="xings" v-for="(items,index) in item.star">
											<image src="https://img.fubaozx.cn/static/oldImg/16995012667917.png" mode="aspectFill"></image>
										</view>
										<view class="xings" v-for="(items,index) in (5-item.star)">
											<image src="https://img.fubaozx.cn/static/oldImg/16995012798836.png" mode="aspectFill"></image>
										</view>
									</view>{{item.star}}分
								</view>
							</view>
							<view class="time">
								<uni-dateformat :date="$clearTime(item.CreatedAt)" :threshold="[60000, 3600000]"></uni-dateformat>
							</view>
						</view>
					</view>
					<view class="contents">
						{{item.content}}
					</view>
					<view class="imglist">
						<image :src="items" mode="" v-for="items in item.img"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance} from "vue";
	import {onLoad,onShow,onPullDownRefresh,onReachBottom} from "@dcloudio/uni-app";
	const {proxy} = getCurrentInstance();
	const data = reactive({
		id:0,
		Comments:[],
		page:0,
		pages:1,
		size:10,
		Commentstotal:0,
		good_rate:0,
		code:-1,
		list:[{code:-1,name:'全部'},{code:0,name:'好评'},{code:1,name:'中评'},{code:2,name:'差评'},{code:3,name:'有图'}]
	})
	onLoad((option)=>{
		data.id=option.id
		addGoodsComments(data.id)
	})
	onShow(()=>{
	})
	onPullDownRefresh(()=> {
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		})
	onReachBottom(()=>{
		addGoodsComments(data.id)
	})
	function settab(index){
		data.code=index
		data.page=0
		data.pages=1
		data.Comments=[]
		addGoodsComments(data.id)
	}
	function addGoodsComments(id){
		if(data.page<data.pages){
			data.page++
			proxy.$request({
				url: `api/addGoodsComments/?id=${id}&page=${data.page}&size=${data.size}&code=${data.code}`,
				method: 'get',
				data: {
					id: id,
				},
				success: (res) => {
					data.Commentstotal=res.data.total
					data.good_rate=res.data.good_rate
					data.pages = Math.ceil(res.data.total / data.size)
					let list=res.data.data
					list.forEach(item=>{
						if(item.img){
							item.img =  JSON.parse(item.img)//eval('('+item.img+')')
						}
						data.Comments.push(item)
					})

				}
			})
		}

	}

	function shopClassList (){
		proxy.$request({
			url: `api/shopClassList/?page=1&size=999`,
			method: 'get',
			success(res) {
			}
		})
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.container{
		padding: 30upx;
		.header{
			display: flex;
			align-items: center;
			background-color: #F9F9F9;
			padding: 20upx;
			border-radius: 20upx;
			.left{
				display: flex;
				image{
					width: 66upx;
					height: 66upx;
				}
				.rate{
					margin-left: 20upx;
					.rate1{
						font-size: 32upx;
						color: #FF4E00;
						font-weight: bold;
					}
					.rate2{
						font-size: 20upx;
						color: #333;
					}
				}
			}
			.right{
				margin-left: 20upx;
				border-left: 1upx solid #eee;
				padding-left: 20upx;
				.right1{
					font-size: 28upx;
					color: #333;
					font-weight: bold;
				}
				.right2{
					font-size: 20upx;
					color: #999;
				}
			}
		}
		.lists{
			display: flex;
			padding: 20upx 0;
			.items{
				padding: 10upx 20upx;
				font-size: 24upx;
			}
			.active{
				background-color: $color1;
				border-radius: 30upx;
				color: #fff;
			}
		}
		.content{
			.title{

			}
			.list{
				.item{
					margin-top: 30upx;
					.info{
						display: flex;
						.head{
							width: 80upx;
							height: 80upx;
							margin-right: 20upx;
							image{
								width: 80upx;
								height: 80upx;
								border-radius: 50%;
							}
						}
						.infobox{
							display: flex;
							.infoboxs{
								.name{
									font-size: 28upx;
									font-weight: bold;
								}
								.star{
										display: flex;
										color: #FFC41F;
										font-size: 20upx;
									.xing{
										display: flex;
										.xings{
											margin-right: 10upx;
											image{
												width: 20upx;
												height: 20upx;
											}
										}
									}
								}
							}
							.time{
								font-size: 20upx;
								 color: #999;
							}
						}
					}
					.contents{
						font-size: 28upx;
						padding: 20upx 0;
					}
					.imglist{
						border-bottom: 1upx solid #eee;
						padding-bottom: 20upx;
						display: flex;
						flex-wrap: wrap;
						image{
							width: 170upx;
							height: 170upx;
							border-radius: 20upx;
							margin-right: 20upx;
						}
					}
				}
			}
		}
	}
</style>
